<template>
  <ContentPageHeader title="STEP 02: 碳排放因子匹配" descText="请关联准确的因子">
    <template #headerRight>
      <div class="body-operate-wrap">
        <el-button
          @click="handleToRule"
          class="g-mr4"
          v-btnPermission="'PCF_FACTOR_MATCH_RULE_VIEW'"
          >匹配规则</el-button
        >
        <el-button @click="handleSmart" :loading="smartLoading" v-btnPermission="'PCF_FACTOR_MATCH'"
          ><CIcon type="c-xian-zhinengguanlian" class="g-mr4"></CIcon>智能匹配</el-button
        >

        <el-button @click="batchRelation" v-btnPermission="'PCF_FACTOR_MATCH'">
          <CIcon type="c-xian-piliangpipei" class="g-mr4"></CIcon>
          批量关联</el-button
        >
        <el-dropdown
          class="g-ml8"
          type="default"
          @command="handleCommand"
          v-btnPermission="'PCF_PROCESS_DATA_EDIT'"
        >
          <el-button :loading="ignoreLoading">
            <CIcon type="c-xian-pilianghulve" class="g-mr4"></CIcon>
            批量忽略不可得</el-button
          >
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="IGNORE_CHECKED">批量忽略选中记录</el-dropdown-item>
              <el-dropdown-item command="IGNORE_ALL_LESS">批量忽略&lt;0.01g记录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </template>
  </ContentPageHeader>
  <div class="c-page-layout__body__content">
    <FactorList ref="listRef"></FactorList>
  </div>
</template>

<script lang="ts" setup name="StepTwo">
import { ref, inject, computed } from 'vue';
import ContentPageHeader from '../ContentPageHeader/index.vue';
import FactorList from './components/FactorList/index.vue';
import { smartRelate } from '@/apis/pcf/myModel/modelDetail';
import { MODEL_DETAIL_ROOT } from '../../types';
import type { ModelDetailRootProvider } from '../../types';
const { modelNo } = inject(MODEL_DETAIL_ROOT) as ModelDetailRootProvider;
import { useMessage } from '@/hooks/useMessage';
import { useRouter } from 'vue-router';
const listRef = ref();
const { createMessage } = useMessage();
const router = useRouter();

const ignoreLoading = computed(() => {
  return listRef.value?.ignoreLoading;
});
const batchRelation = () => {
  // 批量关联
  listRef.value?.handleBatch();
};

const batchIgnore = () => {
  // 批量忽略不可得
  listRef.value?.batchIgnore();
};

const smartLoading = ref(false);
const handleSmart = async () => {
  smartLoading.value = true;
  try {
    await smartRelate(modelNo);
    createMessage.success('智能匹配成功！');
    listRef.value?.refresh();
  } finally {
    smartLoading.value = false;
  }
};
const handleToRule = () => {
  router.push('/configMangement/factorMatchingRule');
};
function handleCommand(command: 'IGNORE_CHECKED' | 'IGNORE_ALL_LESS') {
  // 批量忽略选中记录
  if (command === 'IGNORE_CHECKED') {
    batchIgnore();
    return;
  }
  // 批量忽略小于0.01g记录
  if (command === 'IGNORE_ALL_LESS') {
    listRef.value?.batchIgnoreByDataFn();
    return;
  }
}
</script>
